<template>
  <div>
    <div class="main relative">
      <img src="@/assets/xibao_with_text.jpg" alt="">
      <div class="absolute">
<!--        <div class="title kaiti" :style="{'background-image': 'url(' +background + ')', }">-->
<!--        <div class="title kaiti">-->
<!--          <div class="biantao">热烈祝贺</div>-->
<!--          <div class="kaiti" style="font-size: 34px"><span style="font-size: 18px" class="shuheiti">测试经理</span> 聂安琪</div>-->
<!--          <div style="font-size: 22px" class="shuheiti">卷王排行榜</div>-->
<!--          <div class="dongfangdakai">第<span style="font-size: 80px">1</span>名</div>-->
<!--          <div style="font-size: 18px">言出必践 使命必达</div>-->
<!--        </div>-->
        <div class="grid">
          <grid :column-num="3">
            <grid-item>
              <div class="text">本月出勤天数<br><span>{{monthDay}}天</span></div>
            </grid-item>
            <grid-item>
              <div class="text">本月上班时长<br><span>{{(monthAmount / 60).toFixed(2)}}h</span></div>
            </grid-item>
            <grid-item>
              <div class="text">本月平均时长<br><span>{{ monthAverage }}h/天</span></div>
            </grid-item>
            <grid-item>
              <div class="text">本周出勤天数<br><span>{{weekDay}}天</span></div>
            </grid-item>
            <grid-item>
              <div class="text">本周上班时长<br><span>{{(weekAmount / 60).toFixed(2)}}h</span></div>
            </grid-item>
            <grid-item>
              <div class="text">本周平均时长<br><span>{{ weekAverage }}h/天</span></div>
            </grid-item>
          </grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Grid, GridItem } from 'vant';
import dayjs from "dayjs";
export default {
  name: "analysis",
  components: {Grid, GridItem},
  data(){
    return{
      // background: require("@/assets/gold_back.png"),
      monthDay: 0,
      monthAmount: 0,
      monthAverage: 0,
      weekDay : 0,
      weekAmount: 0,
      weekAverage: 0,
    }
  },
  methods:{
    getData(){
      let list = localStorage.getItem("record")
      if(list){
        list = JSON.parse(list)
        for(let i = 0 ; i < list.length ; i ++){
          let date = list[i].date
          let time = list[i].time
          let minDate = dayjs().startOf('month').format("YYYY-MM-DD")
          let maxDate = dayjs().endOf('month').format("YYYY-MM-DD")
          if(date >= minDate && date <= maxDate){
            this.monthDay ++
            this.monthAmount += this.getWorkTime(time)
          }
          let now = new Date()
          let day = now.getDay()
          const useLastWeekData = localStorage.getItem("useLastWeekData") === '1'
          now.setDate(now.getDate() - day + 1 - (useLastWeekData ? 3 : 0))
          minDate = dayjs(now).format("YYYY-MM-DD")
          now.setDate(now.getDate() + 6)
          maxDate = dayjs(now).format("YYYY-MM-DD")
          if(date >= minDate && date <= maxDate){
            this.weekDay ++
            this.weekAmount += this.getWorkTime(time)
          }
        }
        if(this.monthDay){
          this.monthAverage = (this.monthAmount / this.monthDay / 60).toFixed(2)
        }
        if(this.weekDay){
          this.weekAverage = (this.weekAmount / this.weekDay / 60).toFixed(2)
        }
      }
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.main{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  box-sizing: border-box;
  background-size: 100vw auto;
  justify-content: flex-end;
  user-select: none;
  img{
    width: 100vw;
    height: auto;
  }
  .title{
    color: #ffffff;
    background-image:-webkit-linear-gradient(45deg, #e1b880,#fffbd5,#e8c585);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 55px;
    padding-left: 20px;
    padding-bottom: 20px;
    background-size: 30%;
    div{
      margin-top: 10px;
    }

  }
  .grid{
    padding-bottom: 15px;
    align-self: flex-end;
  }
}
.text{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #EEEEEE;
  font-size: 14px;
  span{
    margin-top: 5px;
    color: #fcfbbe;
    font-size: 16px;
  }
}
</style>
<style>
.van-grid-item__content{
  background-color: transparent;
}
</style>